<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>${systemName}</title>
    <link rel="stylesheet" href="${ctxPath}/assets/common/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/common/module/admin.css?v=311"/>
    <style>
        .numberInfoSubTitle {
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            height: 22px;
            line-height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
        }

        .numberInfoValue {
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            margin-top: 10px;
            height: 32px;
            line-height: 32px;
        }

        .numberInfoSuffix {
            color: rgba(0, 0, 0, .65);
            font-size: 16px;
            font-style: normal;
            margin-left: 4px;
            line-height: 32px;
        }
    </style>
</head>

<body>

<!-- 加载动画，移除位置在common.js中 -->
<div class="page-loading">
    <div class="rubik-loader"></div>
</div>

<!-- 正文开始 -->
<div class="layui-fluid">
    <fieldset class="layui-elem-field layui-field-title" style="border-color: #30A89D;!important;">
        <legend style="color: #30A89D;">报名数据统计</legend>
    </fieldset>
    <div class="layui-form toolbar" style="margin-top: -10px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <select id="semesterId" name="semesterId" lay-search>
                    <option value="">请选择学期</option>
                </select>
            </div>
            <div class="layui-inline">
                <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md7">
            <div class="layui-card">
                <!--<div class="layui-card-header">根据年龄性别统计报名情况</div>-->
                <div class="layui-card-body" style="height: 360px;overflow: hidden;">
                    <div id="ageAndsexChar" style="width: 100%;height: 360px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md5">
            <div class="layui-card">
                <!--<div class="layui-card-header">专业课报名人数TOP10</div>-->
                <div class="layui-card-body" style="height: 360px;overflow: hidden;">
                    <div id="majorTop10char" style="width: 100%;height: 360px;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card">
                <!--<div class="layui-card-header">报名男女比例情况统计</div>-->
                <div class="layui-card-body" style="height: 355px;overflow: hidden;">
                    <div id="sexPie" style="width: 100%;height: 355px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card">
                <!--<div class="layui-card-header">是否是老干部比例情况统计</div>-->
                <div class="layui-card-body" style="height: 355px;overflow: hidden;">
                    <div id="isLgbPie" style="width: 100%;height: 355px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card">
                <!--<div class="layui-card-header">报名历史趋势统计</div>-->
                <div class="layui-card-body" style="height: 355px;overflow: hidden;">
                    <div id="signHistoryChar" style="width: 100%;height: 355px;"></div>
                </div>
            </div>
        </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="border-color: #48B0FC;!important;">
        <legend style="color: #48B0FC;">学员数据统计</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card">
                <!--<div class="layui-card-header">根据政治面貌统计学员情况</div>-->
                <div class="layui-card-body" style="height: 360px;overflow: hidden;">
                    <div id="politicsStatusPie" style="width: 100%;height: 360px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div class="layui-card">
                <!--<div class="layui-card-header">根据学历统计学员情况</div>-->
                <div class="layui-card-body" style="height: 360px;overflow: hidden;">
                    <div id="degreeChar" style="width: 100%;height: 360px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- js部分 -->
@/* 加入contextPath属性和session超时的配置 */
<script type="text/javascript">
    var Feng = {
        ctxPath: "",
        addCtx: function (ctx) {
            if (this.ctxPath === "") {
                this.ctxPath = ctx;
            }
        }
    };
    Feng.addCtx("${ctxPath}");
</script>

<script type="text/javascript" src="${ctxPath}/assets/common/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/common/js/common.js?v=311"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/common/libs/echarts/echartsTheme.js"></script>

<script>
    layui.use(['layer', 'element','ax','form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var element = layui.element;
        var $ax = layui.ax;
        var form = layui.form;

        var ageAndsexChart = echarts.init(document.getElementById('ageAndsexChar'), myEchartsTheme);
        var sexPieChart = echarts.init(document.getElementById('sexPie'), myEchartsTheme);
        var majorBarChart = echarts.init(document.getElementById('majorTop10char'), myEchartsTheme);
        var historyBarChart = echarts.init(document.getElementById('signHistoryChar'), myEchartsTheme);
        var isLgbPieChart = echarts.init(document.getElementById('isLgbPie'), myEchartsTheme);
        var politicsPieChart = echarts.init(document.getElementById('politicsStatusPie'), myEchartsTheme);
        var degreeBarChart = echarts.init(document.getElementById('degreeChar'), myEchartsTheme);

        //查询学期
        var semesterAjax = new $ax(Feng.ctxPath + "/semester/selectSemester", function (data) {
            $("#semesterId").append(data);
        });
        semesterAjax.start();
        //查询最新学期
        var semesterMaxAjax = new $ax(Feng.ctxPath + "/semester/selectNewsSemester", function (data) {
            $("#semesterId").find("option[value='"+data.semesterId+"']").attr("selected",true);
        });
        semesterMaxAjax.start();
        //重新渲染select
        form.render('select');

        //按年龄段、性别比例统计柱状图
        ajaxLoadCharts("barChartByAgeAndSex");
        //按性别比例统计饼状图
        ajaxLoadCharts("pieChartBySex");
        //按专业课统计报名人数top10
        ajaxLoadCharts("barCharByMajor");
        //历史报名人数统计
        ajaxLoadCharts("signHistoryChart");
        //根据条件统计报名是否老干部比例
        ajaxLoadCharts("pieChartByIsLgb");
        //学员政治面貌比例统计
        ajaxLoadCharts("politicsStatus");
        //学员学历比例统计
        ajaxLoadCharts("degree");

        //搜索
        $('#btnSearch').click(function () {
            //按年龄段、性别比例统计柱状图
            ajaxLoadCharts("barChartByAgeAndSex");
            //按性别比例统计饼状图
            ajaxLoadCharts("pieChartBySex");
            //按专业课统计报名人数top10
            ajaxLoadCharts("barCharByMajor");
            //历史报名人数统计
            ajaxLoadCharts("signHistoryChart");
            //根据条件统计报名是否老干部比例
            ajaxLoadCharts("pieChartByIsLgb");
        });

        //ajax加载统计图
        function ajaxLoadCharts(chartsType) {
            //显示echarts加载动画
            ageAndsexChart.showLoading();
            sexPieChart.showLoading();
            majorBarChart.showLoading();
            historyBarChart.showLoading();
            isLgbPieChart.showLoading();
            degreeBarChart.showLoading();
            politicsPieChart.showLoading();
            $.ajax({
                type:"POST",
                url:Feng.ctxPath + "/console/signCharts",
                cache : false,
                dataType:"json",
                data:{
                    chartsType:chartsType,
                    semesterId:$("#semesterId").val()
                },
                success:function(data){
                    //按年龄段、性别比例统计柱状图
                    if(chartsType == 'barChartByAgeAndSex'){
                        barChartByAgeAndSex(data);
                    }else if(chartsType == 'pieChartBySex'){
                        //按性别比例统计饼状图
                        pieChartBySex(data);
                    }else if(chartsType == 'barCharByMajor'){
                        //按专业课统计报名人数top10
                        barCharByMajor(data);
                    }else if(chartsType == 'signHistoryChart'){
                        //历史报名人数统计
                        signHistoryChart(data);
                    } else if(chartsType == 'pieChartByIsLgb'){
                        //根据条件统计报名是否老干部比例
                        pieChartByIsLgb(data);
                    }else if(chartsType == 'politicsStatus'){
                        //学员政治面貌比例统计
                        politicsStatusPieChart(data);
                    }else if(chartsType == 'degree'){
                        //学员学历比例统计
                        stuDegreeBarChart(data);
                    }
                },
                error:function () {
                    Feng.error("加载统计图失败!" + data.responseJSON.message + "!");
                }
            });
        }


        //按年龄段、性别比例统计柱状图
        function barChartByAgeAndSex(data){
            var man = new Array();
            var woman = new Array();
            var ageGroup = new Array();

            for (var i = 0; i < data['ageAndSexData'].length; i++) {
                if(data['ageAndSexData'][i]['sex']=='男'){
                    man.push(data['ageAndSexData'][i]['60岁以下']);
                    man.push(data['ageAndSexData'][i]['61-65岁']);
                    man.push(data['ageAndSexData'][i]['66-70岁']);
                    man.push(data['ageAndSexData'][i]['71-75岁']);
                    man.push(data['ageAndSexData'][i]['76-80岁']);
                    man.push(data['ageAndSexData'][i]['80岁以上']);
                }else{
                    woman.push(data['ageAndSexData'][i]['60岁以下']);
                    woman.push(data['ageAndSexData'][i]['61-65岁']);
                    woman.push(data['ageAndSexData'][i]['66-70岁']);
                    woman.push(data['ageAndSexData'][i]['71-75岁']);
                    woman.push(data['ageAndSexData'][i]['76-80岁']);
                    woman.push(data['ageAndSexData'][i]['80岁以上']);
                }
            }
            //隐藏echarts加载动画
            ageAndsexChart.hideLoading();
            // 指定图表的配置项和数据
            var option =  {
                title : {
                    text: '报名年龄性别统计',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['男','女'],
                    x:'left'
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {
                            show: true,
                            readOnly: true,
                            optionToContent : function(opt) {
                                //console.info(opt);
                                var axisData = opt.xAxis[0].data;
                                var series = opt.series;
                                var tdHeaders = '<td></td>'; //表头
                                series.forEach(function(item) {
                                    tdHeaders += '<td>' + item.name + '</td>'; //组装表头
                                });
                                var table = '<div style="border:1px solid #000;display: block; width: 98%; overflow: auto; height: 98%;font-family: monospace; font-size: 14px; line-height: 1.6rem; color: rgb(0, 0, 0);"><table style="border:0"><tbody><tr>' + tdHeaders + '</tr>';
                                var tdBodys = ''; //数据
                                for (let i = 0, l = axisData.length; i < l; i++) {
                                    for (let j = 0; j < series.length; j++) {
                                        tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                                    }
                                    table += '<tr><td>' + axisData[i] + '</td>' + tdBodys + '</tr>';
                                    tdBodys = '';
                                }

                                table += '</tbody></table></div>';
                                return table;
                            }
                        },
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['60岁以下','61-65岁','66-70岁','71-75岁','76-80岁','80岁以上'],
                        axisLabel : {
                            //坐标轴刻度标签的相关设置。
                            interval:0,
                            rotate:"0"
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                        /* axisLabel : {
                            formatter: '{value} 人'
                        } */
                    }
                ],
                series : [
                    {
                        name:'男',
                        type:'bar',
                        data:man,
                        barWidth:'20',
                        itemStyle : {
                            normal : {color:"#00A595"}
                        },
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'女',
                        type:'bar',
                        data:woman,
                        barWidth:'20',
                        itemStyle : {
                            normal : {color:"#25D6BB"}
                        },
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
            ageAndsexChart.setOption(option);
        }

        //按性别比例统计饼状图
        function pieChartBySex(data){
            var sex = new Array();
            var dataInfoList = new Array();
            var colors = [ '#00A595', '#25D6BB'];
            for (var i = 0; i < data['sexData'].length; i++) {
                var s = data['sexData'][i]['sex'];
                var t = data['sexData'][i]['total'];
                sex.push(s);
                var dataInfo = {value:t, name:s,itemStyle:{ color: colors[i]}};
                dataInfoList.push(dataInfo);
            }

            sexPieChart.hideLoading();
            var option = {
                title : {
                    text: '报名男女比例',
                    //subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: sex
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: true},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '数据展示',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '55%'],
                        data:dataInfoList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            sexPieChart.setOption(option);
        }

        //按专业课统计报名人数top10
        function barCharByMajor(data){
            var major = new Array();
            var value = new Array();
            for (var i = 0; i < data['majorData'].length; i++) {
                major.push(data['majorData'][i]['majorName']);
                value.push(data['majorData'][i]['total']);
            }
            //计算统计的总人数
            var sum = 0;
            for (var i = 0; i < value.length; i++) {
                sum +=	value[i];
            }

            majorBarChart.hideLoading();
            // 指定图表的配置项和数据
            var option =  {
                title : {
                    text: '专业课报名人数TOP10',
                    //subtext: '纯属虚构'
                    x:'center'
                },
                color:['#00A595'],
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['人数'],
                    x:'left'
                },
                toolbox: {
                    show : true,
                    feature : {
                        dataView : {show: true, readOnly: true},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'value',
                        boundaryGap : [0, 0.01]
                    }
                ],
                yAxis : [
                    {
                        type : 'category',
                        data : major
                    }
                ],
                series : [
                    {
                        name:'人数',
                        type:'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: function(v) {
                                    var val = v.data;
                                    // console.log(v.data);
                                    //计算每一项的百分比
                                    if(sum>0){
                                        return  (val/sum*100).toFixed(2) +'%';
                                    }else {
                                        return '';
                                    }
                                },
                                color: '#55B3A6'
                            }
                        },
                        barWidth:'20',
                        data:value
                    }
                ]
            };
            majorBarChart.setOption(option);
        }

        //历史报名人数统计
        function signHistoryChart(data){
            var semester = new Array();
            var total = new Array();
            var man = new Array();
            var woman = new Array();
            for (var i = 0; i < data['historyData'].length; i++) {
                semester.push(data['historyData'][i]['semesterName']);
                total.push(data['historyData'][i]['total']);
                man.push(data['historyData'][i]['M']);
                woman.push(data['historyData'][i]['F']);
            }

            historyBarChart.hideLoading();
            option = {
                title : {
                    text: '报名历史趋势',
                    x:'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    left: 'left',
                    data: ['总人数','男', '女']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: semester
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '总人数',
                        type: 'line',
                        itemStyle : {
                            normal : {color:"#E98BAC"}
                        },
                        barWidth:'20',
                        data: total,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name: '男',
                        type: 'bar',
                        itemStyle : {
                            normal : {color:"#00A595"}
                        },
                        barWidth:'20',
                        data: man,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        }
                    },
                    {
                        name: '女',
                        type: 'bar',
                        itemStyle : {
                            normal : {color:"#25D6BB"}
                        },
                        barWidth:'20',
                        data: woman,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        }
                    }
                ]
            };
            historyBarChart.setOption(option);
        }
        //根据条件统计报名是否老干部比例
        function pieChartByIsLgb(data){
            var isLgb = new Array();
            var dataInfoList = new Array();
            var colors = [ '#00A595', '#25D6BB'];
            for (var i = 0; i < data['isLgbData'].length; i++) {
                var s = data['isLgbData'][i]['isLgb'];
                var t = data['isLgbData'][i]['total'];
                isLgb.push(s);
                var dataInfo = {value:t, name:s,itemStyle:{ color: colors[i]}};
                dataInfoList.push(dataInfo);
            }

            isLgbPieChart.hideLoading();
            var option = {
                title : {
                    text: '老干部比例',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: isLgb
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: true},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '数据展示',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '55%'],
                        data:dataInfoList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            isLgbPieChart.setOption(option);
        }

        //根据政治面貌统计学员情况
        function politicsStatusPieChart(data){
            var politics = new Array();
            var dataInfoList = new Array();
            var colors = [ '#00A595','#25D6BB','#E98BAC','#E69D87','#7CB4CC','#0098D9','#CBB0E3','#516B91','#97B552','#FCCE10'];
            for (var i = 0; i < data['stuPoliticsData'].length; i++) {
                var p = data['stuPoliticsData'][i]['politics'];
                var t = data['stuPoliticsData'][i]['total'];
                politics.push(p);
                var dataInfo = {value:t, name:p, itemStyle:{ color: colors[i]}};
                dataInfoList.push(dataInfo);
            }

            politicsPieChart.hideLoading();
            var option = {
                title : {
                    text: '学员政治面貌',
                    //subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: politics
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: true},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name: '数据展示',
                        type: 'pie',
                        radius : '65%',
                        center: ['50%', '58%'],
                        data:dataInfoList,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            politicsPieChart.setOption(option);
        }


    //学员学历比例统计
    function stuDegreeBarChart(data){
        var degree = new Array();
        var total = new Array();
        for (var i = 0; i < data['stuDegreeData'].length; i++) {
            degree.push(data['stuDegreeData'][i]['degree']);
            total.push(data['stuDegreeData'][i]['total']);
        }

        degreeBarChart.hideLoading();
        option = {
            title : {
                text: '学员学历',
                x:'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                left: 'left',
                data: ['人数']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: degree
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    itemStyle : {
                        normal : {color:"#00A595"}
                    },
                    barWidth:'25',
                    data: total,
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    }/*,
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }*/
                }
            ]
        };
        degreeBarChart.setOption(option);
    }


        // 窗口大小改变事件
        window.onresize = function () {
            ageAndsexChart.resize();
            sexPieChart.resize();
            majorBarChart.resize();
            historyBarChart.resize();
            isLgbPieChart.resize();
            politicsPieChart.resize();
            degreeBarChart.resize();
        };

    });
</script>
</body>

</html>